vue3+vite+ts项目适配各种分辨率解决方案

2024-06-26 20:06| 来源: 网络整理| 查看: 265

现在的电脑屏幕和尺寸越来越多样化，对于前端开发来说，适配各种屏幕成了大难题，开发中一个实际例子：开发一个导航栏，ui给的是1920*60的尺寸，前端开发的时候，在自己电脑缩放比例中开发的，但是到了其他人屏幕，比如2k屏幕或者缩放200%的笔记本上，高度就不一样了，为了解决这个问题，今天就来研究下怎么在各种分辨率下高都都保持不变，完全按照ui尺寸写

试过了根元素设置zoom和scale，但是效果都不理想，各种其奇奇怪怪bug

第一步：首先安装依赖 npm install lib-flexible-computer npm install postcss-px2rem-exclude 第二步：在main.ts中导入： import 'lib-flexible-computer' 第三步：vite.config.ts配置 import postCssPxToRem from 'postcss-px2rem-exclude';

和server平级

css: { postcss: { plugins: [ postCssPxToRem({ remUnit: 192, // 设计稿宽度/10 exclude: /(node_modules)/ //过滤三发ui样式，不进行转换 }) ] } },

【本文地址】

公司简介

联系我们